// 配置控制权限相关
import router from '@/router'
import store from '@/store'
// import { Message } from 'element-ui'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router'
// 配置导航守卫
/* 思路:
    1、有token的情况,判断用户是不是要去登录页 是的话拦截到首页;去其他页面的话放行
    2、没有token的情况,判断哪些页面不想要token就可以去,然后放行;其他页面就拦截到登录页
 */
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  // const token = store.getters.token
  const { token, userInfo } = store.state.user
  // console.log(token)
  Nprogress.start()
  if (token) {
    if (!userInfo.userId) {
      try {
        await store.dispatch('user/getUserInfo')
        const menus = store.state.user.userInfo.roles.menus
        const otherRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        // console.log(otherRoutes)
        // 登录成功后拿到用户信息,获取到了用户的页面权限信息,动态添加路由规则
        router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])

        // 把动态添加的路由存放到vuex中，这样左侧菜单栏就会自动渲染出来
        // store.commit('permission/setRoutes', otherRoutes)
        store.commit('permission/setRoutes', otherRoutes)

        /* 动态添加路由后 第一次访问被添加的路由会出现白屏问题。
        原因:addRoutes 动态路由刚添加完,立刻就访问被添加的路由
        然而此时addRoutes还没有执行结束,此时找不到刚刚被添加的路由导致了白屏
        解决方案: next 重新访问一下路由,相当于本来要直接执行的因为找不到。此时再重新访问一遍,
        而此时动态路由就添加完了。 replace: true 的意思是 由于进了两次这个路由 覆盖掉上次的路由记录
        */
        next({ ...to, replace: true })
      } catch {
        // Message.error('登录信息过期')
        store.commit('user/removeToken')
        next('/login')
        Nprogress.done()
      }
    }
    if (to.path === '/login') {
      next('/')
      Nprogress.done()
    } else {
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      Nprogress.done()
    }
  }
})
router.afterEach((to, from) => {
  Nprogress.done()
})
